<template>
  <el-card>
    <el-row>
      <el-select style="margin-right: 20px" size="small" v-model="defaultCourseId" placeholder="请选择"
                 @change="currentSel">
        <el-option
          v-for="item in teacherCourseList"
          :key="item.courseId"
          :label="item.courseName"
          :value="item.courseId">
        </el-option>
      </el-select>
      <el-button size="small" type="primary" @click="getAppliedStuList">查询</el-button>
    </el-row>
    <el-row>
      <el-table :data="appliedStuList" border stripe>
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="stuId" label="学号"></el-table-column>
        <el-table-column prop="userName" label="姓名"></el-table-column>
        <el-table-column prop="academy" label="学院"></el-table-column>
        <el-table-column prop="major" label="专业"></el-table-column>
        <el-table-column prop="teamIds" label="团队成员">
          <template v-slot:default="scope">
            <div v-if="scope.row.teamIds === null">
              无
            </div>
            <div v-if="scope.row.teamIds !== null">
              {{ scope.row.teamIds }}
            </div>
          </template>
        </el-table-column>
        <!--scope相当于是tableData的一行，与el-table-column唯一对应-->
        <el-table-column prop="state" label="审核状态">
          <template v-slot:default="scope">
            <div v-if="scope.row.state === 0">
              <el-tag type="info">未申请</el-tag>
            </div>
            <div v-if="scope.row.state === 1">
              <el-tag type="primary">正在审核</el-tag>
            </div>
            <div v-if="scope.row.state === 2">
              <el-tag type="success">已通过</el-tag>
            </div>
            <div v-if="scope.row.state === 3">
              <el-tag type="danger">被拒绝</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-tooltip effect="dark" content="通过" placement="top" :enterable="false">
              <el-button @click="acceptAppliedStu(scope.row)" type="primary"
                         icon="el-icon-check" size="small"></el-button>
            </el-tooltip>
            <el-tooltip effect="dark" content="拒绝" placement="top"
                        :enterable="false">
              <el-button @click="rejectAppliedStu(scope.row)" type="danger"
                         icon="el-icon-close"
                         size="small"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
  </el-card>
</template>

<script>
export default {
  data () {
    return {
      teacherCourseList: [],
      appliedStuList: [],
      defaultCourseId: '',
      CurrentSel: ''
    }
  },
  async created () {
    await this.getTeacherCourseList()
    await this.getAppliedStuList()
  },
  methods: {
    async getAppliedStuList () {
      const { data: res } = await this.$http.post('/queryAppliedStuList', { courseId: this.defaultCourseId })
        .catch((error) => {
          console.log(error)
          this.$message.error('网络连接超时')
        })
      if (res.status !== 200) this.$message.error(res.data.msg)
      // console.log(res.data.msg)
      const appliedStuList = res.data
      this.appliedStuList = appliedStuList.data
      this.total = appliedStuList.total
      console.log(this.appliedStuList)
    },
    async getTeacherCourseList () {
      const { data: res } = await this.$http.post('/getTeacherCourse')
        .catch((error) => {
          console.log(error)
          this.$message.error('网络连接超时')
        })
      if (res.status !== 200) this.$message.error('获取课程信息失败')
      const teacherCourseList = res.data
      this.teacherCourseList = teacherCourseList.data
      this.defaultCourseId = this.teacherCourseList[0].courseId
      console.log(this.defaultCourseId)
    },
    async acceptAppliedStu (row) {
      const flag = await this.$confirm('确认要通过该学生的申请吗?')
      if (flag) {
        row.state = 2
        const { data: res } = await this.$http.post('/updateAppliedStu', {
          courseId: this.CurrentSel,
          stuId: row.stuId,
          state: row.state
        })
          .catch((error) => {
            console.log(error)
            this.$message.error('网络连接超时')
          })
        console.log(res)
        if (res.status !== 200) this.$message.error('通过失败')
        await this.getAppliedStuList()
      }
    },
    async rejectAppliedStu (row) {
      const flag = await this.$confirm('确认要拒绝该学生的申请吗?')
      if (flag) {
        row.state = 3
        const { data: res } = await this.$http.post('/updateAppliedStu', {
          courseId: this.CurrentSel,
          stuId: row.stuId,
          state: row.state
        })
          .catch((error) => {
            console.log(error)
            this.$message.error('网络连接超时')
          })
        console.log(res)
        if (res.status !== 200) this.$message.error('拒绝失败')
        await this.getAppliedStuList()
      }
    },
    currentSel (selVal) {
      this.CurrentSel = selVal
    }
  }
}
</script>
